<!-- User List -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'users',
          name: 'Users',
        },
        {
          name: 'Ada Yeo',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="Users">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      </template>
      <GgPageHeader :userInfo="userInfo" title="Ada Yeo" class="mar-b-0">
        <i slot="title-btn" class="title-icon iconfont iconedit"></i>
        <div slot="info">
          <div class="title-status">Active</div>
          <div class="account-info">
            <div class="account-create">Created : 23/02/2020</div>
            <div class="account-sign">Last sign in : 13/07/2020, 3:25 PM</div>
          </div>
          <div class="account-editbtn">
            <div class="editbtn-wrapper mar-r-20">
              <span class="iconfont iconlock-reset2 icon"></span>
              <span class="editbtn-text">Reset Password</span>
            </div>
            <div class="editbtn-wrapper">
              <span class="iconfont iconaccount-minus icon"></span>
              <span class="editbtn-text">Delete user</span>
            </div>
          </div>
        </div>
      </GgPageHeader>
      <border-less-table
        :data="[
          { label: 'First Name', value: 'xxx xxx' },
          { label: 'Last Name', value: 'xxx xxx' },
          { label: 'Email', value: 'xxx' },
          { label: 'Phone', value: 'xxxxxx' },
          { label: 'Job title', value: 'xxx' },
          { label: 'Working type', value: 'xxx' },
        ]"
      />
    </GgPage>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      menuDatas: [
        {
          name: "Personal info",
          key: "personalInfo",
          active: true,
          children: [],
        },
        {
          name: "App access",
          key: "appAccess",
        },
      ],
      activeIndex: "personalInfo",
      userInfo: {
        avatar: require("@/assets/logo.png"),
        firstName: "Dierdre",
        lastName: "Hu",
        email: "Dierdre.hu@edoovo.com",
      },
    };
  },
  methods: {
    menuSelect(key, item) {
      this.activeIndex = key;
      this.$router.push({ name: item.key });
    },
  },
  created() {},
};
</script>
<style lang='less'>
//@import url(); 引入公共css类
</style>